
<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <Header />
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <Aside />
                </el-aside>
                <el-main>
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>

import Header from "../components/Header.vue"
import Aside from "../components/Aside.vue"


</script>

<style lang="less" scoped>
.common-layout {
    height: 100%;
    width: 100%;
}

.el-container {
    height: 100%;
    width: 100%;

}

.el-header {
    width: 100%;
    height: 15%;
    background-image: -webkit-linear-gradient(left, #d3d7e4, #5b8cff);
    color: black;
}

.el-aside {
    width: 15%;
    height: 100%;
    background-image: -webkit-linear-gradient(left, #1947d2, #5ba5ff);
}

.el-main {
    width: 85%;
    height: 100%;
}
</style>